[#include "../../../common/html.ftl" /]
[@html]
    [@head title="修改用户密码" css=["fw"] ]
        <style>

        </style>
    [/@head]
    [@body]
        [@formMain ]
            <div class="fw-forms">
                [@dataForm formId="form-user-editPwd" ]
                    <input type="hidden" name="userId" value="${user.userId!}" />
                    <div class="am-form-group am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <label class="is-required">账号：</label>
                        <input class="am-form-field am-radius" type="text" name="loginName" value="${user.loginName!}" readonly/>
                    </div>
                    <div class="am-form-group am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <label class="is-required">原密码：</label>
                        <input class="am-form-field am-radius password" type="password" name="oldPassword" required/>
                        <span class="toggleBtn"></span>
                    </div>
                    <div class="am-form-group am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <label class="is-required">新密码：</label>
                        <input class="am-form-field am-radius password" type="password" name="newPassword" onkeyup="checkPassword(this.value)" required/>
                        <span class="toggleBtn"></span>
                    </div>
                    <div class="am-form-group am-u-sm-6 am-u-md-6 am-u-lg-6">
                        <label class="is-required">确认新密码：</label>
                        <input class="am-form-field am-radius password" type="password" name="confirm" onkeyup="recheckPassword(this.value)" required/>
                        <span class="toggleBtn"></span>
                    </div>
                    <div class="am-form-group am-form-remark am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <ul>
                            <li id="lower">最少包含一个小写字母</li>
                            <li id="upper">最少包含一个大写字母</li>
                            <li id="number">最少包含一个数字</li>
                            <li id="special">最少包含一个特殊字符</li>
                            <li id="length">最少要有8个字符</li>
                            <li id="recheck">两次输入的新密码必须一致</li>
                        </ul>
                    </div>
                [/@dataForm]
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script js=["fw", "validate"] progress="false" ]
            <script type="text/javascript">
                var prefix = ctx + "osfw/system/manage/user";

                $("#form-user-editPwd").validate({
                    rules:{
                        oldPassword:{
                            required:true,
                            remote: {
                                url: prefix + "/checkPassword",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    password: function() {
                                        return $("input[name='oldPassword']").val();
                                    }
                                }
                            }
                        },
                        newPassword: {
                            required: true,
                            passwordFormat: true
                        },
                        confirm: {
                            required: true,
                            equalTo: "input[name='newPassword']"
                        }
                    },
                    messages: {
                        oldPassword: {
                            required: "请输入原密码",
                            remote: "原密码错误"
                        },
                        newPassword: {
                            required: "请输入新密码",
                            passwordFormat: "新密码不符合以下\"✦\"项的要求"
                        },
                        confirm: {
                            required: "请再次输入新密码",
                            equalTo: "两次密码输入不一致"
                        }

                    },
                    focusCleanup: true
                });

                function submitHandler() {
                    if ($.validate.form()) {
                        $.operate.save(prefix + "/editPwd", $('#form-user-editPwd').serialize());
                        $.modal.msgSuccess("修改成功");
                        $.modal.close();
                    }
                }

                let pswrds = document.querySelectorAll('.password');
                let toggleBtns = document.querySelectorAll('.toggleBtn');
                let lowerCase = document.getElementById('lower');
                let upperCase = document.getElementById('upper');
                let numberCase = document.getElementById('number');
                let specialCase = document.getElementById('special');
                let minLength = document.getElementById('length');
                let reCheck = document.getElementById('recheck');
                let pwd

                //检查密码
                function checkPassword(data) {
                    pwd = data;
                    //确定正则判断
                    const lower = new RegExp('(?=.*[a-z])');
                    const upper = new RegExp('(?=.*[A-Z])');
                    const number = new RegExp('(?=.*[0-9])');
                    const special = new RegExp('(?=.*[!@#\$%\^&\*])');
                    const length = new RegExp('(?=.{8,})');

                    //小写字母判断
                    if (lower.test(data)) {
                        lowerCase.classList.add('valid');
                    } else {
                        lowerCase.classList.remove('valid');
                    };

                    //大写字母判断
                    if (upper.test(data)) {
                        upperCase.classList.add('valid');
                    } else {
                        upperCase.classList.remove('valid');
                    };

                    //数字判断
                    if (number.test(data)) {
                        numberCase.classList.add('valid');
                    } else {
                        numberCase.classList.remove('valid');
                    };

                    //特殊字符判断
                    if (special.test(data)) {
                        specialCase.classList.add('valid');
                    } else {
                        specialCase.classList.remove('valid');
                    };

                    //长度判断
                    if (length.test(data)) {
                        minLength.classList.add('valid');
                    } else {
                        minLength.classList.remove('valid');
                    };

                }


                //检查确认密码
                function recheckPassword(data) {
                    if (data === '') {
                        reCheck.classList.remove('valid');
                    }
                    else if (data === pwd) {
                        reCheck.classList.add('valid');
                    } else {
                        reCheck.classList.remove('valid');
                    };
                };

                //控制密码框输入和隐藏
                for (let i = 0; i < toggleBtns.length; i++) {
                    toggleBtns[i].onclick = function () {
                        if (pswrds[i].type === 'password') {
                            pswrds[i].setAttribute('type', 'text');
                            toggleBtns[i].classList.add('hide');
                        } else {
                            pswrds[i].setAttribute('type', 'password');
                            toggleBtns[i].classList.remove('hide');
                        };
                    };
                };
            </script>
        [/@script]
    [/@body]
[/@html]